<template>
  <div class="detail">
    <div class="box">
      <van-icon name="revoke" class="revert" @click="$router.go(-1)" />
      <SwiperVue :bannerArr="gallery"></SwiperVue>

      <!-- 商品相关内容 -->

      <h4>{{ name }}</h4>
      <h5>
        {{ goodsbrief }} <span>{{ retailprice | formatMoney }}</span>
      </h5>

      <ul>
        <h4>商品参数</h4>
        <li v-for="item in attribute" :key="item.id">
          <p>{{ item.name }}&nbsp;:&nbsp;{{ item.value }}</p>
        </li>
      </ul>
      <van-divider
        :style="{
          color: '#333',
          borderColor: '#333',
          padding: '10px 120px',
          fontWeight: 'bolder',
        }"
      >
        常见问题
      </van-divider>
      <div class="problem" v-for="item in issue" :key="item.id">
        <h4>{{ item.question }}</h4>
        <p>{{ item.answer }}</p>
      </div>
      <van-divider
        :style="{
          color: '#333',
          borderColor: '#333',
          padding: '10px 120px',
          fontWeight: 'bolder',
        }"
      >
        相关商品
      </van-divider>
      <div class="imger">
        <img :src="listpicurl" alt="" />
        <div class="relevant">
          <p v-html="goods_desc"></p>
        </div>
      </div>
    </div>
    <!-- 底部添加购物车与购买 -->
    <van-goods-action>
      <van-goods-action-icon icon="star" text="收藏" color="#ff5000" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="badge"
        @click="$router.push('/car')"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addcar"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品弹出框 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      ref="myref"
    />
  </div>
</template>
<script>
import SwiperVue from "@/components/Swiper.vue";
// 引入 详情页接口和加入购物车接口
import { getdatail, cartadd, carnum } from "@/utils/https";

export default {
  name: "",
  data() {
    return {
      gallery: [], //详情页的轮播图数组
      show: false, //是否显示规格面板
      goods: {
        picture: "", //弹出的商品展示缩略图
      }, //当前商品信息
      goodsId: "", //当前商品id
      sku: {
        //商品数据
        tree: [],
        price: "1.00", //默认价格(元)
        stock_num: 227, //商品库存
        hide_stock: false, //是否隐藏剩余库存
      },
      id: "", //产品id 来自productList的第一个数组项中的id
      badge: 0, //当前购物车商品数量

      // 商品相关数据
      name: "",
      goodsbrief: "",
      retailprice: 0,
      listpicurl: "",
      goodsnumber: 0,
      attribute: [],
      issue: [],
      goods_desc:'',
    };
  },
  computed: {},
  components: {
    SwiperVue,
  },
  methods: {
    addcar() {
      // 点击加入购物车出现弹窗
      this.show = true;
    },
    onBuyClicked() {
      // 弹窗的点击购买
    },
    onAddCartClicked() {
      // 弹窗的点击加入购物车
      // 获取当前商品面板的组件实例对象,(该对象中getSkuData方法 可以获取到商品购买数量)
      //   console.log(this.$refs.myref.getSkuData());
      cartadd({
        goodsId: this.goodsId,
        productId: this.id,
        number: this.$refs.myref.getSkuData().selectedNum,
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 0) {
          // 添加购物车成功
          this.badge = res.data.data.cartTotal.goodsCount;
          this.$toast({
            type: "success",
            message: "添加成功",
            duration: 1000,
          });
          // 隐藏商品弹窗
          this.show = false;
        } else {
          this.$toast({
            type: "fail",
            message: "添加失败",
            duration: 1000,
          });
        }
      });
    },
  },
  created() {
    console.log(this.$route.query);
    getdatail(this.$route.query).then((res) => {
      console.log(res);
      this.gallery = res.data.data.gallery;
      // 修改添加获取到的数据(将 img_url 中的值给想添加的 image_url)
      this.gallery = this.gallery.map((item) => {
        item.image_url = item.img_url;
        return item;
      });
      //   console.log(this.gallery);
      this.goods.picture = res.data.data.info.list_pic_url;
      this.sku.price = res.data.data.info.retail_price;
      this.sku.stock_num = res.data.data.info.goods_number;
      this.goodsId = res.data.data.info.id;
      this.id = res.data.data.productList[0].id;

      // 渲染商品相关数据
      this.name = res.data.data.info.name;
      this.goodsbrief = res.data.data.info.goods_brief;
      this.retailprice = res.data.data.info.retail_price;
      this.listpicurl = res.data.data.info.list_pic_url;
      this.goodsnumber = res.data.data.info.goods_number;
      this.attribute = res.data.data.attribute;
      this.issue = res.data.data.issue;
      this.goods_desc=res.data.data.info.goods_desc
    });
    carnum().then((res) => {
      console.log("c", res);
      this.badge = res.data.data.cartTotal.goodsCount;
    });
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.detail {
  .box {
    padding-bottom: 80px;
    .revert {
      position: fixed;
      z-index: 20;
    }
    h4 {
      font-size: 16px;
      text-align: center;
      height: 35px;
      line-height: 35px;
    }
    h5 {
      font-size: 12px;
      text-align: center;
      color: #999;
      span {
        display: block;
        color: #8b0000;
        font-weight: 500;
      }
    }
    ul {
      padding-top: 20px;
      li {
        width: 80%;
        margin: auto;
        p {
          line-height: 30px;
          font-size: 16px;
          margin-bottom: 10px;
          padding-left: 10px;
          background-color: #efefef;
          border-radius: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .problem {
      padding: 0 20px;
      p {
        font-size: 12px;
        line-height: 20px;
        padding: 5px;
        background-color: rgba(0, 0, 255, 0.208);
        border-radius: 5px;
      }
    }
    .imger {
        width: 80%;
        padding-top:10px ;
        margin: auto;
      /deep/img {
        width: 100%;
      }
    }
    /deep/.van-divider{
        margin: 0;
    }
  }
}
</style>
